<template>
	<view class="content">
		<view class="trend-container">
			<image id="bc-img" class="img" mode="widthFix" src="../../../static/icon/recovery_assess/bgcImg.png"
				@load="onImgLoad" />
			<canvas id="canvas" canvas-id="canvas"
				:style="{ width: width+'px', height: height+'px', top: (imageHeight-height)/2 + 'px'}">
			</canvas>
			<view class="oval-warapper"
				:style="{ width: width-140+'px', height: height-140+'px', top: (imageHeight-(height-140))/2+'px'}">
			</view>
			<view class="oval-warapper border-line"
				:style="{ width: width-130+'px', height: height-130+'px', top: (imageHeight-(height-130))/2+'px'}">
			</view>
			<view class="score-warpper"
			:style="{ width: width-130+'px', height: height-130+'px', top: (imageHeight-(height-130))/2+'px'}">
				<view class="title">本次总得分</view>
				<view class="score">{{detailInfo.score}}</view>
			</view>
		</view>
		<u-line color="white"></u-line>
		<view class="report" v-if="report">
			<text>{{report}}</text>
		</view>
		<view class="btn-box">
			<view @click="uniShare" class="btn-box">
				<bigBtnL :btnBoxWidth="btnBoxWidthL" :btnBoxHeight="btnBoxHeightL" :btnColor="btnColorL"
					:btnImgSrc="btnImgSrcL" :btnText="btnTextL" :btnTextColor="btnTextColorL"
					:btnTextSize="btnTextSizeL" :btnImgWidth="btnImgWidthL" :btnRadius="btnRadiusL">
				</bigBtnl>
			</view>
			<view @click="jump" class="btn-box">
				<bigBtnL :btnBoxWidth="btnBoxWidthR" :btnBoxHeight="btnBoxHeightR" :btnColor="btnColorR"
					:btnImgSrc="btnImgSrcR" :btnText="btnTextR" :btnTextColor="btnTextColorR"
					:btnTextSize="btnTextSizeR" :btnImgWidth="btnImgWidthR" :btnRadius="btnRadiusR">
				</bigBtnL>
			</view>
		</view>
	</view>
</template>

<script>
	import canvas from './canvas.js';
	import bigBtnL from '@/components/bigButtonLeft.vue';
	import UniShare from '@/components/uni-share/js_sdk/uni-share.js';
	
	const uniShare = new UniShare();
	export default {
		components: {
			bigBtnL
		},
		onBackPress({
			from
		}) {
			console.log(from);
			if (from == 'backbutton') {
				this.$nextTick(function() {
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
		components: {
			bigBtnL
		},
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				loading: false,
				disabled: false,
				show: false,
				report: "",
				url: "",

				btnBoxWidthL: 300,
				btnBoxHeightL: 120,
				btnColorL: "#3FB8D9",
				btnImgSrcL: "../../../static/icon/training/share.png",
				btnTextL: "分享视频",
				btnTextColorL: "#ffffff",
				btnTextSizeL: 20,
				btnImgWidthL: 50,
				btnRadiusL: 50,

				btnBoxWidthR: 300,
				btnBoxHeightR: 120,
				btnColorR: "#FF6B3D",
				btnImgSrcR: "../../../static/icon/training/home.png",
				btnTextR: "返回首页",
				btnTextColorR: "#ffffff",
				btnTextSizeR: 20,
				btnImgWidthR: 50,
				btnRadiusR: 50,

				detailInfo: {},
				width: 400,
				height: 400,
				imageHeight: 0,
				// canvas数据源配置，value取值范围 0~100
				dataMap: [
					{
						attName: '连续性',
						value: 90
					},
					{
						attName: '舒展性',
						value: 90
					},
					{
						attName: '抬脚时间',
						value: 90
					},
					{
						attName: '步频',
						value: 90
					},
					{
						attName: '稳定性',
						value: 70
					},
				]
			}
		},
		onLoad(option) {
			let str = decodeURIComponent(option.detailItem)
			if (str != "undefined") {
				this.detailInfo = JSON.parse(str);
			}
			this.url = uni.getStorageSync("url");
			this.getDetail();
			this.getSystemInfo();
		},
		onReady() {
			// 延迟绘制，防止canvas未挂载完成导致的绘制异常
			setTimeout(() => {
				canvas(uni.createCanvasContext("canvas", this), this.width, this.height, this.dataMap);
			}, 500)
		},
		methods: {
			jump() {
				uni.switchTab({
					url: '../../tabBar/gait-assess/gait-assess'
				})
			},
			uniShare() {
				const me = this;
				uniShare.show({
					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
						type: 0,
						href: me.detailInfo.after_url,
						title: '康复进展',
						summary: '我的最新康复评估数据',
						imageUrl: '/static/96x96.png'
					},
					menus: [{
							"img": "/static/app-plus/sharemenu/wechatfriend.png",
							"text": "微信好友",
							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
							"text": "微信朋友圈",
							"share": {
								"provider": "weixin",
								"scene": "WXSceneTimeline"
							}
						},
						// {
						// 	"img": "/static/app-plus/sharemenu/mp_weixin.png",
						// 	"text": "微信小程序",
						// 	"share": {
						// 		provider: "weixin",
						// 		scene: "WXSceneSession",
						// 		type: 5,
						// 		miniProgram: {
						// 			id: '123',
						// 			path: '/pages/list/detail',
						// 			webUrl: '/#/pages/list/detail',
						// 			type: 0
						// 		},
						// 	}
						// },
						// {
						// 	"img": "/static/app-plus/sharemenu/weibo.png",
						// 	"text": "微博",
						// 	"share": {
						// 		"provider": "sinaweibo"
						// 	}
						// },
						// {
						// 	"img": "/static/app-plus/sharemenu/qq.png",
						// 	"text": "QQ",
						// 	"share": {
						// 		"provider": "qq"
						// 	}
						// },
						// {
						// 	"img": "/static/app-plus/sharemenu/copyurl.png",
						// 	"text": "复制",
						// 	"share": "copyurl"
						// },
						// {
						// 	"img": "/static/app-plus/sharemenu/more.png",
						// 	"text": "更多",
						// 	"share": "shareSystem"
						// }
					],
					cancelText: "取消分享",
				}, e => { //callback
					console.log(uniShare.isShow);
					console.log(e);
				})
			},
			getDetail() {
				const me = this;
				const usertoken = uni.getStorageSync("usertoken");
				const info = uni.getStorageSync("accountInfo");
				uni.request({
					url: me.serverUrl + "/gait/getReport",
					data: {
						"video_url": me.detailInfo.after_url
					},
					method: "POST",
					header: {
						"usertoken": usertoken
					},
					success(res) {
						if (res.data.status == 200) {
							me.report = res.data.data;
						}
					}
				})
			},
			getSystemInfo() {
				const {
					screenWidth,
					screenHeight
				} = uni.getSystemInfoSync();
				this.height = screenWidth;
				this.width = screenWidth;
			},
			onImgLoad(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#bc-img').boundingClientRect(data => {
					this.imageHeight = data.height;
				}).exec();
			}
		}
	}
</script>

<style>
	@import url("gait-report-detail.css");
</style>
